<template>
	<view>
		<view class="head">
			<u-navbar title=" " :bgColor="'rgba(255,255,255,'+poc+')'" leftIcon="" placeholder></u-navbar>
			<view class="u-flex u-flex-y-center" style="padding: 30rpx 0;">
				<image src="/static/logo.png" class="head__tx" mode="aspectFill"></image>
				<view class="" style="flex: 1;">
					<view class="head__name">
						躲在深山里的天山童姥
					</view>
					<view class="head__mobile">
						15613545682
					</view>
				</view>
				<image src="/static/my/set.png" class="head__set" mode=""></image>
			</view>
			<view class="head__box">
				<view class="head__box__item">
					<view class="head__box__item__num">
						1
					</view>
					<view class="head__box__item__text">
						优惠券
					</view>
				</view>
				<view class="head__box__item">
					<view class="head__box__item__num">
						12
					</view>
					<view class="head__box__item__text">
						余额
					</view>
				</view>
				<view class="head__box__item">
					<view class="head__box__item__num">
						10
					</view>
					<view class="head__box__item__text">
						拼购分
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content__a">
				<view class="content__a__t" @click="navto('/pages/order/list')">
					<view class="content__a__title">
						我的订单
					</view>
					<view class="content__a__more">
						全部
					</view>
					<u-icon name="arrow-right" color="#919191" size="24rpx"></u-icon>
				</view>
				<view class="u-flex u-flex-y-center">
					<view class="content__a__i" v-for="(item,index) in orderlist" :key="index" @click="navto('/pages/order/list?status='+item.status)">
						<image :src="'/static/my/t'+index+'.png'" class="content__a__i__icon" mode=""></image>
						<view class="content__a__i__text">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="content__b">
				<view class="content__b__i" v-for="(item,index) in list" :key="index">
					<image :style="item.ist" :src="'/static/my/i'+index+'.png'" class="" mode=""></image>
					<view class="content__b__i__text">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="u-flex u-flex-y-center u-flex-between u-flex-wrap">
				<goods v-for="(item,index) in goodslist" :item="item" :key="index"></goods>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderlist: [{
						name: '待支付',
						status: 0
					},
					{
						name: '拼单中',
						status: 1
					},
					{
						name: '待收货',
						status: 2
					},
					{
						name: '待评价',
						status: 3
					},
					{
						name: '售后/退款',
						status: 4
					},
				],
				list: [{
						name: '天天抽奖品',
						ist: 'width:54rpx;height:55rpx;',
						url: ''
					},
					{
						name: '收货地址',
						ist: 'width:46rpx;height:52rpx;margin-top:2rpx;',
						url: ''
					},
					{
						name: '商品收藏',
						ist: 'width:54rpx;height:54rpx;',
						url: ''
					},
					{
						name: '用户反馈',
						ist: 'width:52rpx;height:48rpx;margin-top:2rpx;',
						url: ''
					},
					{
						name: '客服帮助',
						ist: 'width:52rpx;height:50rpx;',
						url: ''
					},
				],
				goodslist: [{
					name: '阳光玫瑰葡萄5晴王新鲜无籽香印青提',
					price: '32.9',
					oldprice: '36.9',
					pic:'/static/goods/p0.png'
				},{
					name: '京鲜生陕西徐香猕猴桃22粒 单果约80-100g ',
					price: '32.9',
					oldprice: '36.9',
					pic:'/static/goods/p1.png'
				},{
					name: '秘鲁进口树上熟哈斯即食牛油果',
					price: '32.9',
					oldprice: '36.9',
					pic:'/static/goods/p2.png'
				},{
					name: '南非进口红心西柚9斤当季新鲜水果',
					price: '32.9',
					oldprice: '36.9',
					pic:'/static/goods/p3.png'
				}],
				poc:0
			};
		},
		onPageScroll(e) {
			if(e.scrollTop>0){
				this.poc=1
			}else{
				this.poc=0
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.head {
		// height: 537rpx;
		padding: 0 30rpx 60rpx;
		background: linear-gradient(170deg, #3DD473 0%, #31C35B 100%);

		&__tx {
			width: 100rpx;
			height: 100rpx;
			background: #107006;
			border-radius: 50%;
			border: 4px solid rgba(255, 255, 255, 0.5);
			margin-right: 20rpx;
		}

		&__name {
			font-family: PingFang;
			font-weight: 800;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 30rpx;
		}

		&__mobile {
			font-family: PingFang;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 24rpx;
			margin-top: 20rpx;
		}

		&__set {
			width: 35rpx;
			height: 37rpx;
		}

		&__box {
			height: 134rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&__item {
				width: 33.33%;
				display: flex;
				flex-direction: column;
				align-items: center;

				&__num {
					font-family: DINNextLTPro;
					font-weight: 500;
					font-size: 44rpx;
					color: #161824;
					line-height: 60rpx;
				}

				&__text {
					font-family: PingFang;
					font-size: 24rpx;
					color: #646464;
					line-height: 38rpx;
				}
			}
		}

	}

	.content {
		padding: 25rpx 29rpx 150rpx 24rpx;
		background: #F8F8F8;
		border-radius: 30rpx;
		margin-top: -30rpx;

		&__a {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 36rpx 0 50rpx;
			margin-bottom: 24rpx;

			&__t {
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
			}

			&__title {
				font-family: PingFang;
				font-weight: 800;
				font-size: 30rpx;
				color: #161824;
				flex: 1;
				line-height: 30rpx;
			}

			&__more {
				font-family: PingFang;
				font-weight: 800;
				font-size: 25rpx;
				color: #919191;
				line-height: 25rpx;
				margin-right: 4rpx;
			}

			&__i {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;

				&__icon {
					width: 50rpx;
					height: 50rpx;

				}

				&__text {
					font-family: PingFang;
					font-weight: 800;
					font-size: 24rpx;
					color: #1E1E1E;
					line-height: 24rpx;
					margin-top: 20rpx;
				}
			}
		}

		&__b {
			padding: 50rpx 0;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 32rpx;

			&__i {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				height: 97rpx;

				&__text {
					font-family: PingFang;

					font-size: 24rpx;
					color: #1E1E1E;
					line-height: 24rpx;
				}
			}
		}
	}
</style>